<template>
  <body>
  <div class="background">
    <img src="static/background.jpg" width="100%" height="100%" alt=""/>
  </div>
  <el-page-header @back="goBack" content="用户信息" style="margin-top: -2%">
  </el-page-header>
  <div>
    <el-card class="card">
      <div>
        <el-input
          @keyup.enter.native="searchClick"
          placeholder="通过用户名搜索..."
          prefix-icon="el-icon-search"
          size="small"
          style="width: 400px;margin-top: -7%;font-size: 18px;margin-left: 10%"
          v-model="keywords">
        </el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick" style="font-size: 18px">搜索</el-button>
      </div>
      <router-link to="/addUser" style="width:20px;margin-left: 80%;">
        <el-link icon="el-icon-edit" style="font-size: 18px">添加用户</el-link>
      </router-link>
      <div class="table" style="width: 100%;height: 100%;">
        <el-table
          style="background: hsla(0, 0%, 80%, .25) border-box;height: 588px;font-size: 18px"
          :data="users.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          border
          stripe
          height="600">
          <el-table-column
            v-for="info in rightHeader" :key="info.key"
            :property="info.key"
            :label="info.label"
          >
            <template slot-scope="scope">
              {{scope.row[scope.column.property]}}
            </template>
          </el-table-column>
          <el-table-column label="用户详情">
            <template slot-scope="scope">
              <el-button type="primary" @click="editB(scope.row)" style="font-size: 18px">编辑</el-button>
              <el-button @click="delB(scope.row)" style="font-size: 18px">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row style="margin-top: 1%;margin-left: -1%">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="users.length"
          layout="total, prev, pager, next, jumper">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
  </body>
</template>

<script>
  export default {
    data() {
      return {
        users: [
          {
            customerId: '',
            passWord: '',
            userName: '',
            phoneNumber: '',
            address: '',
            balance: '',
            power: ''
          },
        ],
        rightHeader: [
          {
            label: '用户名',
            key: 'customerId'
          },
          {
            label: '姓名',
            key: 'userName'
          },
          {
            label: '权限',
            key: 'power'
          }
        ],
        currentPage: 1,
        pageSize: 7,
        keywords: '',
      };
    },
    created() {
      this.load();
    },
    methods: {
      load(){
        this.$axios.get('/user/select')
          .then(resp => {
            if (resp.data.code == 200) {
              this.users = resp.data.data;
            }
          })
      },
      goBack() {
        this.$router.go(-1);
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
      },
      editB(e){
        if(e.power>=2&&this.$store.state.power1!="super"&&this.$store.state.customerId!=e.customerId){
          this.$alert("权限不足!", '提示', {
            confirmButtonText: '确定'
          });
        }else{
          this.$router.push({path:'/editUser',query:{customerId:e.customerId}});
        }
      },
      delB(e){
        let id=this.$store.state.customerId;
        if(id==e.customerId) {
          this.$alert("不能删除自己!", '提示', {
            confirmButtonText: '确定'
          });
        }
        else if(e.power>=2&&this.$store.state.power1!="super"){
          this.$alert("权限不足!", '提示', {
            confirmButtonText: '确定'
          });
        }
        else {
          this.$confirm('是否确认删除？', '提示', {}).then(() => {
            this.$axios.post('/user/delU/' + e.customerId)
              .then(resp => {
                if (resp.data.code == 200) {
                  this.$alert("删除成功!", '提示', {
                    confirmButtonText: '确定',
                    callback:action => {
                      this.load();
                    }
                  });
                }
              })
          }).catch(() => {
            this.$message({
              message: '取消删除',
              type: 'failed'
            })
          });
        }
      },
      searchClick(){
        let _this=this;
        _this.$axios.post('/user/selectBI/'+_this.keywords)
          .then(resp => {
            if (resp.data.code == 200) {
              _this.users=[
                {
                  customerId: '',
                  passWord: '',
                  userName: '',
                  phoneNumber: '',
                  address: '',
                  balance: '',
                  power: ''
                },
              ];
              _this.users[0] = resp.data.data;
            }
          })
      },
    }
  };
</script>

<style scoped>
  .background {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }

  .card {
    position: relative;
    width: 875px;
    margin-top: 2%;
    margin-left: 26.5%;
    padding: 1em;
    background: hsla(0, 0%, 50%, .25) border-box;
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
  }

  .table /deep/ .el-table th {
    background: hsla(0, 0%, 80%, .25) border-box;
    color: black;
  }

  .table /deep/ .el-table tr {
    background: hsla(0, 0%, 80%, .25) border-box;
    color: black;
  }
  .table /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background: hsla(0, 0%, 80%, .25) border-box;
    color: black;
  }

</style>
